<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		
		.box1,.box2{
			width: 200px;
			height: 200px;
			background-color: #0f0;
			padding: 20px;
			border: 10px solid #ccc;
		}
		
		.box2{
			background-color: #00f;
			box-sizing: border-box;
		}
		/* 标准盒模型 content-box:宽度 = width + padding + border
						高度 = height + padding + border
						;
			怪异盒模型 border-box:宽度 = width
						高度 = height */
		
		.a1{
			width: 1000px;
			height: 800px;
			background-color: rgb(255,109,93);
			margin: 0 auto;
			padding: 50px 150px;
		}
		
		.a2{
			width: 700px;
			height: 700px;
			border: 2px dashed #fff;
			padding: 48px;
		}
		
		.a3{
			width: 600px;
			height: 600px;
			border: 2px solid #ccc;
			background-color: rgb(255,136,124);
			padding: 48px;
		}
		
		.a4{
			width: 500px;
			height: 500px;
			border: 2px dashed #ccc;
			background-color: rgb(255,173,78);
			padding: 48px;
		}
		
		.a5{
			width: 400px;
			height: 400px;
			border: 2px dashed #fff;
			background-color: rgb(225,236,72);
			padding: 8px;
		}
		
		
		.a6{
			width: 380px;
			height: 380px;
			border: 2px dashed #fff;
			background-color: rgb(164,198,73);
			padding: 48px;
		}
		
		.a7{
			width: 280px;
			height: 280px;
			border: 2px dashed #fff;
			background-color: rgb(255,109,93);
		}
	</style>
</head>

<body>
	<div class="box1">abbaba</div>
	<div class="box2">shsndnd</div>
	
	<div class="a1">
		<div class="a2">
			<div class="a3">
				<div class="a4">
					<div class="a5">
						<div class="a6">
							<div class="a7"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	

	




	<div style="height: 200px;"></div>
</body>

</html>